const path=require("path")
const extractTextWebpackPlugin=require("extract-text-webpack-plugin")

// 引入  html-webpack-plugin
const htmlWebpackPlugin =require("html-webpack-plugin")

// 引入复制图片的模块 
const  copyWebpackPlugin=require('copy-webpack-plugin')


module.exports={
    mode:"development",
    context:path.join(__dirname,"./src") ,//入口起点
    entry:"./js/main.js", 
    output:{
        path:path.join(__dirname,"./dist"),
        filename:"bundle.js",
    }, 

    module:{
        rules:[
            {
                test: /\.css$/,
                use:extractTextWebpackPlugin.extract({
                    fallback:"style-loader", 
                    use:"css-loader"
                })
            },
   
            { 
                test: /\.less$/, 
                use: extractTextWebpackPlugin.extract({ 
                    fallback: "style-loader", 
                    use: ['css-loader', "less-loader"]
                })
            },
            
            {
                test: /\.(png|jpg|jpeg|gif|svg|webp)$/, //图片各种类型判断
                use:"url-loader" //识别url地址的
            },

            // 图标类型文件后缀
            {
                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                loader: 'url-loader'
            }


        ] 

    } ,

    plugins:[
        new extractTextWebpackPlugin("./css/index.css"),
        new htmlWebpackPlugin({
            // filename:"./a.html",//出口html文件 一般为index.html

            filename:"./index.html",//出口html文件
            template:"./index.html",//模板 入口html文件 从入口起点中查找模板
            favicon:"./images/a.ico",//小图标的地址,打包过后的小图标还叫原来的名，但是小图标一般会直接放到项目根目录下
            minify:{
                // 是否压缩：
                collapseBooleanAttributes:true,//是否简写属性 默认false
                minifyCSS:true,//是否压缩html中的css
                minifyJS:true,//是否压缩html中的js
                removeAttributeQuotes:true,//是否去掉属性的引号
                removeComments:true// 是否移除注释
            }
        }),
        new  copyWebpackPlugin([
            {
                from:path.join(__dirname,"./src/images"),//图片原地址
                to:path.join(__dirname,"./dist/images"),//图片新地址
            },
        ])
    ] ,
    devServer:{
        port:3000,
        open:true,
        // proxy:代理转发 前端在本地解决跨域
    }

}
